 /*
 * @description: app弹窗列表
 * @Author: along
 * @Date: 2021-09-15
 * @Last Modified by: along
 * @Last Modified time: 2021-09-15
 */
<template>
    <div class="zsdxPopup">
        <div class="__header">
            <div class="__header_lines" />
            <div class="__header_title">
                APP弹窗列表
            </div>
            <div
                class="__header_button"
                :style="{
                    color: TYPE === 1 ? 'rgba(255, 255, 255, 1)' : 'rgba(51, 51, 51, 1)',
                    background: TYPE === 1 ? 'rgba(32, 160, 255, 1)' : 'rgba(255, 255, 255, 1)',
                    border: TYPE === 1 ? '' : '1px rgba(217, 217, 217, 1) solid',
                    marginRight: '20px'
                }"
                @click="TYPE = 1"
            >
                普通弹窗
            </div>
            <div
                class="__header_button"
                :style="{
                    color: TYPE === 2 ? 'rgba(255, 255, 255, 1)' : 'rgba(51, 51, 51, 1)',
                    background: TYPE === 2 ? 'rgba(32, 160, 255, 1)' : 'rgba(255, 255, 255, 1)',
                    border: TYPE === 2 ? '' : '1px rgba(217, 217, 217, 1) solid'
                }"
                @click="TYPE = 2"
            >
                二维码弹窗
            </div>
        </div>

        <div class="__wraps">
            <app-popup-list
                v-if="TYPE === 1"
                ref="appPopupList"
            />
            <popup-code
                v-if="TYPE === 2"
                ref="popupCode"
            />
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import appPopupList from '../app-popup-list';
import popupCode from './popup-code';
export default {
    mixins: [back],
    components: {
        appPopupList,
        popupCode
    },
    data () {
        return {
            TYPE: 1, // 1:普通弹窗 2:二维码弹窗
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: 'APP弹窗列表'}]);
        this.authResult = this.$route.meta.authResult;
    },
    methods: {

    }
};
</script>

<style lang="less" scoped>
.zsdxPopup {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 12px;
    width: calc(100% - 24px);
    .__header {
        height: 78px;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 24px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        .__header_lines {
            width: 3px;
            height: 20px;
            background: rgba(24, 144, 255, 1);
            margin-right: 8px;
        }
        .__header_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            margin-right: 12px;
        }
        .__header_button {
            height: 30px;
            box-sizing: border-box;
            white-space: nowrap;
            padding: 0 12px;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
        }
    }
    .__wraps {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
        // border: 1px red solid;
    }
}
</style>
<style lang="less">
.zsdxPopup{
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
}
</style>